<template>
  <div id="userDetails" class="fatherContainer">
    <!-- 头部 -->
    <!-- {{ user }} -->
    <div class="header">
      <div><el-avatar :size="100" :src="user.userFace"></el-avatar></div>
      <el-button type="text" @click="toEditImg">修改头像</el-button>
    </div>
    <div class="content">
      <el-form v-model="user" label-width="70px" label-position="left">
        <el-row>
          <el-col :span="7" style="height: 1px"></el-col>
          <el-col :span="8">
            <el-form-item label="姓 名">{{ user.realname }}</el-form-item>
          </el-col>
          <el-col :span="6" style="height: 1px">
            <el-form-item label="手机号">{{ user.telephone }}</el-form-item>
          </el-col>
          <el-col :span="3" style="height: 1px"></el-col>
        </el-row>
        <el-row>
          <el-col :span="7" style="height: 1px"></el-col>
          <el-col :span="8">
            <el-form-item v-if="user.gender === 'male'" label="性 别"
              >男</el-form-item
            >
            <el-form-item v-else label="性 别">男</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="user.roles" label="角 色">{{
              user.roles[0].name
            }}</el-form-item>
          </el-col>
          <el-col :span="3" style="height: 1px"></el-col>
        </el-row>
        <el-row>
          <el-col :span="7" style="height: 1px"></el-col>
          <el-col :span="8">
            <el-form-item label="用户名">admin1</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间">{{
              user.registerTime | fmtDate
            }}</el-form-item>
          </el-col>
          <el-col :span="3" style="height: 1px"></el-col>
        </el-row>
        <el-row>
          <el-col :span="7" style="height: 1px"></el-col>
          <el-col :span="8">
            <el-form-item label="状 态"
              ><el-tag type="success" size="small">{{
                user.status
              }}</el-tag></el-form-item
            >
          </el-col>
          <el-col :span="12" style="height: 1px"> </el-col>
        </el-row>
      </el-form>
      <!-- 模态框-个人信息 -->
      <el-dialog :title="title" :visible.sync="visible">
        <el-form ref="user_form" :model="form" :rules="rules">
          <el-form-item label="用户名" label-width="80px" prop="username">
            <el-input v-model="form.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="姓名" label-width="80px" prop="realname">
            <el-input v-model="form.realname" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" label-width="80px" prop="password">
            <el-input v-model="form.password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" label-width="80px" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" label-width="80px">
            <el-input v-model="form.telephone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出生日期" label-width="80px">
            <el-date-picker
              v-model="form.birth"
              value-format="timestamp"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="visible = false">取 消</el-button>
          <el-button type="primary" size="small" @click="saveUserHandler"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 模态框-修改头像 -->
      <el-dialog :title="title" :visible.sync="visible1">
        <div class="upload">
          <el-upload
            ref="upload"
            :data="data"
            class="avatar-uploader"
            :action="this.baseURL + '/file/upload'"
            :on-success="uploadSuccessHandler"
            :file-list="fileList"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过3M
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="visible1 = false">取 消</el-button>
          <el-button type="primary" size="small" @click="saveUserHandler1"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div class="footer">
      <el-button type="text" @click="toEditInfoHandler">修改个人信息</el-button
      ><br /><br />
      <!-- <el-button type="primary" size="small" @click="goBackHandler"
        >返回</el-button
      > -->
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { get, post, del } from "@/utils/request";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      data: {},
      visible: false,
      visible1: false,
      user: {},
      form: {},
      title: "修改个人信息",
      imageUrl: "",
      fileList: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        realname: [
          { required: true, message: "请输入姓名", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 查询数据
    loadUsers() {
      this.$store.dispatch("user/getInfo").then((res) => {
        this.user = res;
        this.imageUrl = res.userFace;
        this.data.id = res.id;
      });
    },
    // 修改个人信息按钮
    toEditInfoHandler() {
      this.form = _.clone(this.user);
      this.title = "修改个人信息";
      this.visible = true;
    },
    // 修改头像按钮
    toEditImg() {
      this.title = "修改头像";
      this.visible1 = true;
    },
    // 修改信息确认按钮
    saveUserHandler() {
      this.$refs["user_form"].validate((valid) => {
        if (valid) {
          const url = "/baseUser/saveOrUpdate";
          post(url, this.form).then((response) => {
            this.visible = false;
            this.$message({ message: response.message, type: "success" });
            this.loadUsers();
          });
        } else {
          return false;
        }
      });
    },
    // 头像上传成功回调
    uploadSuccessHandler(response) {
      if (response.status == 200) {
        this.imageUrl = "http://121.199.29.84:8888/group1/" + response.data.id;
        this.$set(
          this.data,
          "userface",
          "http://121.199.29.84:8888/group1/" + response.data.id
        );
      } else {
        this.$message({ type: "error", message: "附件服务器异常！" });
        this.visible = false;
      }
    },
    // 修改头像确认按钮
    saveUserHandler1() {
      const url = "/baseUser/alterUserface";
      // console.log(this.data);
      post(url, this.data).then((response) => {
        this.visible1 = false;
        this.$message({ message: response.message, type: "success" });
        this.loadUsers();
      });
    },
    // 返回按钮
    // goBackHandler() {
    //   this.$router.go(-1);
    // },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.loadUsers();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.header {
  text-align: center;
  padding: 1em 0;
  border-bottom: 2px solid #f4f4f4;
  margin-bottom: 1em;
}
.content {
  color: #606266;
}
.footer {
  text-align: center;
  padding: 1em 0;
  border-top: 2px solid #f4f4f4;
}
.upload {
  text-align: center;
}
</style>
<style type="text/css">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
